<template>
  <div id="app">
    <div style="text-align: left;height: 50px;margin-top: 20px;">
      <el-form :inline="true" :model="queryParam" size="medium">
        <el-form-item label="审核状态">
          <el-select
              v-model="queryParam.auditStatus"
              placeholder="请选择审核状态">
            <el-option label="未审核" :value=0></el-option>
            <el-option label="审核失败" :value=2></el-option>
            <el-option label="审核通过" :value=3></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="总数">
          <el-switch
              @change="queryAuditUsers()"
              v-model="queryParam.isCount"
              active-color="#13ce66"
              inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="queryAuditUsers">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="margin-top: 20px;">
      <el-table v-loading="listLoading"
                :data="result.list"
                border
                :header-cell-style="headClass"
                :cell-style="rowClass"
                style="width: 100%">
        <el-table-column
            prop="id"
            label="用户id"
            width="120">
        </el-table-column>
        <el-table-column
            prop="companyName"
            label="用户名"
            width="180">
        </el-table-column>
        <el-table-column
            prop="registeredNumber"
            label="工商注册号"
            width="250">
        </el-table-column>
        <el-table-column
            prop="createdTime"
            label="创建时间">
          <template slot-scope="scope">
            <span>{{ dateFormat(scope.row.createdTime) }}<br></span>
          </template>
        </el-table-column>
        <el-table-column prop="auditStatus" label="审核状态">
          <template slot-scope="scope">
            <el-button slot="reference" type="primary" icon="el-icon-minus" size="mini" circle
                       v-if="scope.row.auditStatus===0" @click="handleEdit(scope.row)"></el-button>
            <el-button slot="reference" type="danger" icon="el-icon-close" size="mini" circle
                       v-if="scope.row.auditStatus===2" @click="handleEdit(scope.row)"></el-button>
            <el-button type="success" icon="el-icon-check" size="mini" circle
                       v-if="scope.row.auditStatus===3"></el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
    <!-- 底栏容器 -->
    <el-footer style="text-align: left;">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParam.pageNum"
          :page-sizes="[10,20,30,40,50,100,200,500,1000]"
          :page-size="queryParam.pageSize"
          :layout="queryParam.isCount ? 'total, sizes, prev, pager, next, jumper' : 'sizes, prev, next'"
          :total="result.totalNum">
      </el-pagination>
    </el-footer>
  </div>
</template>

<script>

import {getNotAuditUsers, postAuditUser} from "@/api";

export default {
  name: "admAuditCompanyInformation",
  data() {
    return {
      listLoading: false,
      queryParam: {
        pageNum: 1,
        pageSize: 10,
        isCount: false,
        userType: 2,
        auditStatus: 0
      },
      result: {
        list: [],
        totalNum: -1
      }
    }
  },
  methods: {
    headClass() {
      return "text-align:center"
    },
    rowClass() {
      return "text-align:center"
    },
    queryAuditUsers() {
      if (this.queryParam.auditStatus === null || this.queryParam.auditStatus === '' || this.queryParam.auditStatus === undefined) {
        throw 'error -> 请输入审核状态'
      }
      this.listLoading = true
      getNotAuditUsers(this.queryParam).then(res => {
        this.result.list = res.data.list
        this.result.totalNum = res.data.totalNum
        this.listLoading = false
      })
    },
    handleSizeChange(val) {
      this.queryParam.pageSize = val
      this.queryCompaniesByName()
    },
    handleCurrentChange(val) {
      this.queryParam.pageNum = val
      this.queryCompaniesByName()
    },
    dateFormat(it) {
      let date = new Date(it * 1000)
      return (
          date.getFullYear() +
          '年' +
          (date.getMonth() + 1) +
          '月' +
          date.getDate() +
          '日'
      );
    },
    handleEdit(row) {
      this.$confirm('此操作将修改审核状态, 是否继续?', '提示', {
        distinguishCancelAndClose: true,
        confirmButtonText: '通过',
        cancelButtonText: '失败',
        type: 'warning',
        center: true
      }).then(() => {
        this.auditDetail = {};
        this.$set(this.auditDetail, "userId", row.id);
        this.$set(this.auditDetail, "userType", 2);
        this.$set(this.auditDetail, "auditStatus", 3);
        postAuditUser(this.auditDetail).then(() => {
          this.$message.success('修改审核状态成功')
          this.queryAuditUsers()
        })
      }).catch((action) => {
        if (action === 'cancel') {
          this.auditDetail = {};
          this.$set(this.auditDetail, "userId", row.id);
          this.$set(this.auditDetail, "userType", 2);
          this.$set(this.auditDetail, "auditStatus", 2);
          postAuditUser(this.auditDetail).then(() => {
            this.$message.success('修改审核状态成功')
            this.queryAuditUsers()
          })
        }
      });
    }
  },
  mounted() {
    window.app = this;
  },
  created() {
    this.queryAuditUsers()
  }
}
</script>

<style scoped>


</style>